<template>
  <div>
    <div style="margin-top: 10px;display: flex; justify-content: center">
      <el-input
              size="small"
              style="width: 400px;margin-right: 10px"
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              @keydown.enter.native="doSearch"
              v-model="keywords">
      </el-input>
      <el-button size="small" type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
    </div>
    <div class="hr-container">
      <el-card class="hr-card" v-for="(hr,index) in hrs" :key="index">
        <div slot="header" class="clearfix">
          <span>{{hr.name}}</span>
          <el-button
                  style="float: right; padding: 3px 0;color: #ff000e"
                  type="text"
                  @click="deleteHr(hr)"
                  icon="el-icon-delete">
          </el-button>
        </div>
        <div>
          <div class="img-container">
            <img :src="hr.userface" :alt="hr.name" :title="hr.name" class="userface-img">
          </div>
          <div class="userinfo-container">
            <div>用户名：{{hr.name}}</div>
            <div>手机号码：{{hr.phone}}</div>
            <div>电话号码：{{hr.telephone}}</div>
            <div>地址：{{hr.address}}</div>
            <div>用户状态：
              <el-switch
                      v-model="hr.enabled"
                      @change="enableChange(hr)"
                      active-text="启用"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      inactive-text="禁用">
              </el-switch>
            </div>
            <div>用户角色：
              <el-tag size="small" type="success" v-for="(role,indexk) in hr.roles" :key="indexk"
                      style="margin-right: 4px;">
                {{role.namezh}}
              </el-tag>
              <el-popover
                      placement="right"
                      title="角色列表"
                      @show="showPop(hr)"
                      @hide="hidePop(hr)"
                      width="200"
                      trigger="click">
                <el-select v-model="selectedRoles" multiple placeholder="请选择">
                  <el-option
                          v-for="(r,indexr) in allroles"
                          :key="indexr"
                          :label="r.namezh"
                          :value="r.id">
                  </el-option>
                </el-select>
                <el-button slot="reference" icon="el-icon-more" type="text"></el-button>
              </el-popover>
            </div>
            <div>备注：{{hr.remark}}</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  export default {
    name: "PerEmp",
    data() {
      return {
        keywords: '',
        selectedRoles: [],
        allroles: [],
        hrs: []
      }
    },
    methods: {
      deleteHr(hr) {
        this.$confirm('此操作将永久删除【' + hr.name + '】, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest("/system/hr/" + hr.id).then(resp => {
            if (resp) {
              this.initHrs();
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 更新用户权限
      enableChange(hr) {
        this.putRequest("/system/hr/", hr).then(resp => {
          if (resp) {
            this.initHrs();
          }
        })
      },
      // 弹出窗显示时调用方法
      showPop(hr) {
        this.initRoles();
        let roles = hr.roles;
        this.selectedRoles = [];
        roles.forEach(r => {
          this.selectedRoles.push(r.id)
        })


      },
      // 弹出窗隐藏时调用方法
      hidePop(hr) {
        let roles = [];
        // 复制 hr中的 roles 给 roles 变量，原因是如果直接赋值会影响原数据
        Object.assign(roles, hr.roles);
        // 当 true 时表示需要进行更新操作
        let flag = false;
        // 当 roles 长度与选中数据的长度不一致时，则需要进行更新
        if (roles.length != this.selectedRoles.length) {
          flag = true;
        } else {
          for (let i = 0; i < roles.length; i++) {
            let role = roles[i];
            for (let j = 0; j < this.selectedRoles.length; j++) {
              let sr = this.selectedRoles[j];
              // 表示用户原有的角色与选中角色中存在相同角色
              if (role.id == sr) {
                // 将相同角色从 roles 中删除
                roles.splice(i, 1);
                // 原因是删除i元素后,i元素往后的元素都将会往前移一位，不进行 i-- 则会跳过一个元素
                i--;
                break;
              }
            }
          }
          // 如果至此 roles 还是不等于0 ，表示用户原有角色与选中角色存在差异，需要进行更新操作
          if (roles.length != 0) {
            flag = true;
          }
        }
        if (flag) {
          let url = "/system/hr/role/?hrid=" + hr.id;
          this.selectedRoles.forEach(sr => {
            url += "&rids=" + sr;
          })
          console.log(url);
          this.putRequest(url).then(resp => {
            if (resp) {
              this.initHrs();
            }
          })
        }
      },
      // 获取所有角色
      initRoles() {
        this.getRequest("/system/hr/role").then(resp => {
          if (resp) {
            this.allroles = resp;
          }
        })
      },
      // 搜索方法
      doSearch() {
        this.initHrs();
      },
      // 获取用户信息
      initHrs() {
        this.getRequest("/system/hr/?keywords=" + this.keywords).then(resp => {
          if (resp) {
            this.hrs = resp;
            this.keywords = ''
          }
        })
      }
    },
    mounted() {
      this.initHrs();
    }
  }
</script>

<style>
  .hr-container {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .hr-card {
    width: 350px;
    margin-bottom: 20px;
  }

  .userinfo-container {
    font-size: 12px;
    color: #409eff;
  }

  .img-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .userface-img {
    width: 72px;
    height: 72px;
    border-radius: 72px;
  }

</style>